import { Component, EventEmitter, Input, Output } from '@angular/core'
import { AdControlValueAccessor } from 'monk-design/class'

@Component({
  selector: 'ad-search-input',
  template: `
    <nz-input-group [nzSuffix]="template">
      <input
        [placeholder]="placeholder"
        nz-input
        [(ngModel)]="value"
        (ngModelChange)="onChange($event)"
        type="text"
      />
    </nz-input-group>
    <ng-template #template>
      <span class="ti-search" *ngIf="!value"></span>
      <span
        (click)="clearValue($event)"
        nz-icon
        class="ant-input-clear-icon"
        nzTheme="fill"
        nzType="close-circle"
        *ngIf="value"
      ></span>
    </ng-template>
  `,
  styles: [
    `
      :host {
        display: block;
        width: 100%;
        min-width: 100px;
      }
    `,
  ],
  providers: AdControlValueAccessor.NG_VALUE_ACCESSOR(AdSearchInputComponent),
})
export class AdSearchInputComponent extends AdControlValueAccessor {
  /**
   * 点击清除按钮触发的事件
   */
  @Output() change: EventEmitter<any> = new EventEmitter()
  /**
   * 点击清除按钮触发的事件
   */
  @Output() clear: EventEmitter<any> = new EventEmitter()

  /**
   * 无数据占位符
   */
  @Input() placeholder: string = ''

  constructor() {
    super()
  }

  clearValue(event) {
    this.value = ''
    this.onChange(this.value)
    this.change.emit(event)
    this.clear.emit()
  }
}
